<template>
  <fragment>
    <template v-for="menu in menuData">
      <el-submenu :id="menu.id" :key="menu.id" :index="menu.id" v-if="menu.children">
        <template slot="title">
          <svg-icon
            v-if="menu.icon"
            class="svg-icon"
            style="width:18px;height:18px;margin-right:10px"
            :iconClass="menu.icon"
          />
          <span slot="title">{{ menu.name }}</span> 
          <img style="display:inline-block;margin-left:5px;" v-if="menu.flag" src="../../public/img/new.png" />
        </template> 
        <menu-tree :menuData="menu.children"></menu-tree>
      </el-submenu>
      <el-menu-item  :id="menu.id" :key="menu.id" :index="menu.id" v-else>
        <svg-icon
          v-if="menu.icon"
          class="svg-icon"
          style="width:18px;height:18px;margin-right:10px"
          :iconClass="menu.icon"
        />
        <span slot="title">{{ menu.name }}</span>
      </el-menu-item>
    </template>
  </fragment>
</template>
<script>
export default {
  props: ['menuData'],
  name: 'MenuTree'
}
</script>
